<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="../../学习资料/一些学习插件/vue.js"></script>
        <link rel="stylesheet" href="../../学习资料/lib/animate.css/animate.css">
</head>
<body>
    <!-- 值绑定 -->
    <!-- <div class="box">
        <input type="checkbox" name="" id="" v-model="checked" true-value="yes" false-value="no">
        <h1>{{checked}}</h1>如果选中 checked里就是yes 如果没选中checked就是no
    </div> -->
    <!-- <script>
        let vm = new Vue({
            el:'.box',
            data:{
                checked:''
            }
        })
    </script> -->
    <!-- 表单事件修饰符 -->
    <!-- <div class="box">
        <!-- .lazy -->
        <!-- <input type="text" v-model='msg'>正常v-model绑定是只要input更改就回执行
        <input type="text" v-model.lazy="msg">加了.lazy就变成onchange事件 更改完失去焦点才会执行
        <h1>{{msg}}</h1> -->
        <!-- .number -->
        <!-- <input type="text" v-model="num">数据类型是string
        <input type="text" v-model.number="num">加了.number只要开头是数字 数据类型检测就会是数值类型
        <h1>{{typeof(num)}}</h1> -->
        <!-- trim -->
        <!-- <input type="text" v-model="info">
        <input type="text" v-model.trim="info">
        <h1>xxxxx{{info}}xxxxx</h1>
    </div> -->
    <!-- <script>
        let vm = new Vue({
            el:'.box',
            data:{
                msg:'',
                num:'1',
                info:''
            }
        }) -->
        <!-- 过渡和动画 -->
        <!-- <style>
            /* 动画进入的状态 */
            .iu-enter-active{
                transform:translateX(100px);
                transition:all 5s;
            }
            /* 动画进入前的初始状态 */
            .iu-enter{
                opacity: 0;
            }
            /* 动画进入之后的结束状态 */
            .iu-enter-to{
                opacity: 1;
            }
            /* 动画离开的时间段 */
            .lll-leave-active{
                animation: anima 5s linear;
            }
            /* 动画进入的时间段 */
            .lll-enter-active{
                animation: anima 2s linear;
            }
            /* 定义动画 */
            @keyframes anima{
                /* 0%的时候的动画 */
                0%{
                    transform:translateX(0px) scale(0);
                }
                /* 100%时的动画 */
                100%{
                    transform:translateX(100px) scale(2);
                }
            }
        </style> -->
        <!-- <div class="box">
            <transition name="iu">
                <h1 v-if="flag">{{msg}}</h1>如果flag=true显示msg的内容
            </transition>
            <transition name="lll">
                <h1 v-if="flag">sdhjfgvn</h1>如果flag=true显示内容
            </transition>

            <button @click="flag = !flag">显示隐藏</button>点击一下 flag = ！flag 
            <h1 v-if="!flag">1111</h1> 
        </div> -->
        <!-- <script>
            let vm = new Vue({
                el:'.box',
                data:{
                    msg:'css过渡和动画',
                    flag:true
                }
            })
            // let vm = new Vue({
            //     el:'.box',
            //     data:{
            //         flag:true
            //     }
            // })
        </script> -->
        <!-- 过滤器 -->
        <!-- <div class="box">
            <h1>{{msg|upper}}</h1>
            <h1 v-bind:title="msg|upper">XXXX</h1>
            <h1>{{msg|Upper}}</h1>
            <h1>{{text|Lower}}</h1>
        </div> -->
        <!-- <script>
             // 全局过滤器
                Vue.filter('Upper',(value)=>{
                // console.log(value);
                    return value.toUpperCase();
                })
                Vue.filter('Lower',(value)=>{
                    value = value.toLowerCase();
                    // console.log(value);
                    // console.log(value.charAt(0).toUpperCase());
                    // console.log(value.slice(1));
                    return value.charAt(0).toUpperCase() + value.slice(1) + '?';
                })
            // 局部过滤器
            const vm = new Vue({
                el:'.box',
                data:{
                    msg:'In winter, it is covered with snow and snow. ',
                    text:'When you climb to Jinding, you can see far and wide, and the scenery is very magnificent'
                },
                filters:{
                    upper(value){
                        // console.log(value);//In winter, it is covered with snow and snow. 
                        return value.toUpperCase();
                    }
                }
            })
        </script> -->
        <!-- 表单绑定 -->
        <!-- <div class="box">
            本输入框 初始值空字符串 
            <input type="text" v-model="msg">
            <h1>{{msg}}</h1>
            单个多选框  初始值布尔值
            <input type="checkbox" name="" id="" v-model="check">
            <h1>{{check}}</h1>
            个多选框 初始值空数组
            <label for="game">
                <input type="checkbox" name="" id="game" value="游戏" v-model="checkArr">游戏
            </label>
            <label for="football">
                <input type="checkbox" name="" id="football" value="足球" v-model="checkArr">足球
            </label>
            <label for="sleep">
                <input type="checkbox" name="" id="sleep" value="睡觉" v-model="checkArr">睡觉
            </label>
            <h1>{{checkArr}}</h1>
            下拉列表 初始值为空串
            <select name="" id="" multiple v-model="selectStr">
                <option value="" disabled>请选择</option>
                <option value="猪八戒">猪八戒</option>
                <option value="孙悟空">孙悟空</option>
                <option value="沙和尚">沙和尚</option>
                <option value="唐僧">唐僧</option>
            </select>
            <h1>{{selectStr}}</h1>
        </div> -->
        <!-- <script>
            const vm = new Vue({
                el:'.box',
                data:{
                    msg:'',
                    check:true,
                    checkArr:[],
                    selectStr:''
                }
            })
        </script> -->
        <!-- 值绑定 -->
        <!-- <div class="box">
            <input type="checkbox" name="" id="" v-model="checked" true-value="Yes" false-value="No">设置input框的值 选中未选中都有值
            <h1>{{checked}}</h1>
            <label for="sex">
                <input type="radio" name="" id="sex" :value="sexValue" v-model="radioValue">
            </label>
            <button @click="flag = !flag">改变flag的值</button>
            <h1>{{radioValue}}</h1>
        </div> -->
        <!-- <script>
            const vm = new Vue({
                el:'.box',
                data:{
                    checked:'',
                    radioValue:'',
                    flag:true
                },
                computed:{
                    sexValue(){
                        return this.flag ? '男' : '女'
                    }
                }
            })
        </script> -->
        <!-- 表单修饰符 -->
        <!-- <div class="box">
            <input type="text" v-model="msg">
            <h1>{{msg}}</h1>
            <input type="text" v-model.lazy="msg">
            <input type="text" v-model.number="num">
            <h1>{{typeof(num)}}</h1>
            <input type="text" v-model.trim="msg">
            <h1>XXXXX{{msg}}xxxxxx</h1>
        </div> -->
        <!-- <script>
            const vm = new Vue({
                el:'.box',
                data:{
                    msg:'dsgfhjhagsdf',
                    num:'1'
                }
            })
        </script> -->
        <!-- 过渡和动画 -->
        <!-- <style>
            .llll-enter-active{
                transform: translateX(300px);
            }
            .llll-leave-active{
                transform:translateY((110px))
            }
        </style>
        <div class="box">
            <transition name="llll">
                <h1 v-if="flag">拉拉拉拉拉</h1>
            </transition>
            <button @click="flag = !flag">显示隐藏</button>
        </div>
        <script>
            const vm = new Vue({
                el:'.box',
                data:{
                    flag:true
                }
            })
        </script> -->
</body>
</html>